<template>
  <div>
    <div class="clockIn">
      <div class="work">
        <h3>上午上班</h3>
        <h3 class="el-icon-success" v-if="startwork != '' && startwork != undefined">{{ startwork }}</h3>
      </div>
      <div class="work">
        <h3>上午下班</h3>
        <h3 class="el-icon-success" v-if="downwork != '' && downwork != undefined">{{ downwork }}</h3>
      </div>
    </div>
    <div class="afternoon">
      <div class="work">
        <h3>下午上班</h3>
        <h3 class="el-icon-success" v-if="afstartwork != '' && afstartwork != undefined">{{ afstartwork }}</h3>
      </div>
      <div class="work">
        <h3>下午下班</h3>
        <h3 class="el-icon-success" v-if="afdownwork != '' && afdownwork != undefined">{{ afdownwork }}</h3>
      </div>
    </div>
    <div class="gettime" @click="getworktime">
      <h2>{{ gettime }}</h2>
      <h2>打卡</h2>
    </div>
  </div>
</template>

<script>
import api from '@/api/api'
export default {
  data() {
    return {
      gettime: '',
      startwork: '',
      downwork: '',
      afstartwork: '',
      afdownwork: '',
      address: '',
      postdata: {
        officeAddress: '',
        officeHours: '',
      },
      downdata: {
        closingAddress: '',
        closingTime: '',
      },
    }
  },
  methods: {
    getTime() {
      var _this = this
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      _this.postdata.officeHours = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
      _this.gettime = hh + ':' + mf + ':' + ss
      if (_this.postdata.officeHours != '') {
        _this.downdata.closingTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
      }
    },

    currentTime() {
      setInterval(this.getTime, 1000)
    },
    getworktime() {
      if (this.afdownwork != '' && this.afdownwork != undefined) {
        this.$message({
          message: '今日打卡已完成！',
          type: 'info',
        })
      } else {
        api.getworkclock().then(e => {
          if (e.code == 200) {
            this.startwork = e.data.morningStartTime
            this.downwork = e.data.morningEndTime
            this.afstartwork = e.data.afternoonStartTime
            this.afdownwork = e.data.afternoonEndTime
          }
        })
      }
    },
  },
  created() {
    api.getstatus().then(e => {
      if (e.data) {
        this.startwork = e.data.morningStartTime
        this.downwork = e.data.morningEndTime
        this.afstartwork = e.data.afternoonStartTime
        this.afdownwork = e.data.afternoonEndTime
      }
    })
  },
  mounted() {
    this.currentTime()
  },
}
</script>

<style lang="scss" scoped>
.clockIn {
  display: flex;
  justify-content: space-around;
  .work {
    width: 183px;
    height: 103px;
    background-color: #f3f5f7;
    border-radius: 20px 20px 20px 20px;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    h3 {
      font-weight: 400;
    }
    .el-icon-success {
      color: #409eff;
    }
  }
}
.afternoon {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  .work {
    width: 183px;
    height: 103px;
    background-color: #f3f5f7;
    border-radius: 20px 20px 20px 20px;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    h3 {
      font-weight: 400;
    }
    .el-icon-success {
      color: #409eff;
    }
  }
}
.gettime {
  width: 183px;
  height: 183px;
  border-radius: 50%;
  margin: 40px auto;
  margin-top: 39px;
  background-color: #409eff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  h2 {
    font-weight: 300;
    font-size: 15px;
  }
}
</style>
